Este es un ejemplo de rutas que tengo en mi aplicación:

 { path: "/something", name: "SomeRoute", component: SomeComponent, meta: {showExtra: true}, }, { path: "/somethingElse", name: "SomeOtherRoute", component: SomeOtherComponent, },

Luego tengo el siguiente componente, que como notará tiene dos etiquetas de script , una con API de composición y otra sin:

 <template> <div> This will always be visible. Also here's a number: {{ number }} </div> <div v-if="showExtra"> This will be hidden in some routes. </div> </template> <script setup lang="ts"> import type { RouteLocationNormalized } from "vue-router" import { ref } from "vue" const number = 5 const showExtra = ref(true) const onRouteChange = (to: RouteLocationNormalized) => { showExtra.value = !!to.meta?.showExtra } </script> <script lang="ts"> import { defineComponent } from "vue" export default defineComponent({ watch: { $route: { handler: "onRouteChange", flush: "pre", immediate: true, deep: true, }, }, }) </script>

Esto funciona correctamente: cuando ingreso una ruta con meta: {showExtra: false} oculta el div adicional, de lo contrario, lo muestra.

Sin embargo, lo que quiero hacer es lograr lo mismo usando solo la API de composición, en otras palabras, eliminando la segunda etiqueta <script> por completo. He intentado esto:

 <script setup lang="ts"> import type { RouteLocationNormalized } from "vue-router" import { ref } from "vue" import { onBeforeRouteUpdate } from "vue-router" // ... // same as before // ... onBeforeRouteUpdate(onRouteChange) </script>

Pero esto no tendrá el efecto esperado cuando cambie de ruta. Soy consciente de la función de watch que podría importar, pero no estoy seguro de cómo obtener la metainformación sobre la ruta y cómo apaciguar al verificador de tipos.